<template>
  <!--仓库资料-->
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogVisible"
    :beforeClose="handleClose"
    width="450px"
  >
    <div>
      <el-form
        size="mini"
        :model="sendForm"
        label-width="100px"
        ref="formName"
        :rules="rules"
      >
        <el-form-item label="仓库名称：" prop="whName">
          <el-input v-model="sendForm.whName" style="width: 200px" clearable></el-input>
        </el-form-item>
        <el-form-item label="供方公司：" prop="companyName">
          <el-select v-model="sendForm.companyName" clearable>
            <el-option
              v-for="item in fromCompanyList"
              :label="item.fromCompanyName"
              :value="item.fromCompanyName"
              :key="item.fromCompanyName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库分组：" prop="groupsId">
          <el-select style="width: 190px" v-model="sendForm.groupsId" clearable>
            <el-option
              v-for="item in whGroupLists"
              :label="item.groupName"
              :value="item.groupId"
              :key="item.groupId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在地区：" prop="areaId">
          <el-cascader
            filterable
            clearable
            ref="diQuIds"
            v-model="sendForm.areaId"
            @change="chooseAreaId"
            :props="{
              value: 'areaId',
              label: 'areaName',
              children: 'children',
            }"
            :options="options"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详情地址：" prop="address">
          <el-input v-model="sendForm.address" style="width: 200px" clearable></el-input>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input
            v-model="sendForm.sortOrder"
            clearable
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input style="width: 150px" v-model="sendForm.remark" clearable></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button
        type="primary"
        @click="handleConfirm"
        :loading="btnLoading">确认</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getAreaList, getFromCompanyList } from "@/api/allInLine/inquiry";
import { getWarehouseUpdate, getWhGroupData } from "@/api/allInLine/management";
import { mapGetters } from "vuex";
import { Message } from "element-ui";

const defaultSendForm = {
  //whNo: "", //  仓库编号
  whName: "", //仓库名称
  companyName: "", //供方公司id
  groupsId: "", // 仓库分组：1自营  2合作  3第三方
  areaId: "", //区id
  cityId: "", //市id
  provinceId: "", //省id
  areaInfo: "", //省市区字符串
  address: "", //详细地址
  sortOrder: 0, // 排序
  remark: "", //备注,
  warehouseId: "", //仓库id（修改的时候传）
};

export default {
  name: "index",
  data() {
    return {
      goodSortList: [],
      salesmanLists: [],
      fromCompanyList: [], //供货方公司
      whGroupLists: [], // 分组列表
      dialogVisible: false,
      btnLoading: false,
      sendForm: JSON.parse(JSON.stringify(defaultSendForm)),
      rules: {
        whName: [
          { required: true, message: "仓库名称不能为空", trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "请选择供方公司", trigger: "change" },
        ],
        groupsId: [
          { required: true, message: "请选择仓库分组", trigger: "change" },
        ],
        areaId: [{ required: true, message: "请选择所在地区", trigger: "change" }],
        address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
      },
      options: [],
      title: "",
      goodsSnList: [],
    };
  },
  computed: {
    ...mapGetters(["name", "mobile", "userId"]),
  },
  components: {},
  created() {},
  filters: {},
  methods: {
    // 选择地区
    chooseAreaId(value) {
      this.sendForm.provinceId = value.length > 0 ? value[0] : defaultSendForm['provinceId']
      this.sendForm.cityId = value.length > 0 ? value[1] : defaultSendForm['cityId']
      this.sendForm.areaId = value.length > 0 ? value[2] : defaultSendForm['areaId']
      this.sendForm.areaInfo = this.$refs["diQuIds"].getCheckedNodes()[0] ? this.$refs["diQuIds"].getCheckedNodes()[0].pathLabels.join("") : ""
    },
    //显示
    showPop(type,item) {
      this.getAddressListData();
      this.fromCompanyLists();
      this.getWhGroupDatas();
      this.dialogVisible = true;
      this.sendForm = JSON.parse(JSON.stringify(defaultSendForm));
      if (type == 'add') {
        this.title = "新增仓库";
        this.sendForm.warehouseId = "";
      }
      if (type == 'edit') {
        this.title = "编辑仓库";
        for (let key in defaultSendForm) {
          this.sendForm[key] = item[key] ? item[key] : defaultSendForm[key];
        }
        this.sendForm.whName = item.warehouseName ? item.warehouseName : '';
      }
      // if (item) {
      //   this.title = "编辑仓库";
      //   // this.sendForm.whNo = item.wh_no ? item.wh_no : ''
      //   this.sendForm.whName = item.wh_name ? item.wh_name : "";
      //   this.sendForm.companyName = item.store.store_id
      //     ? item.store.store_id
      //     : "";
      //   this.sendForm.groupsId = item.groups_id ? item.groups_id : "";
      //   this.sendForm.areaId = item.area_id ? item.area_id : "";
      //   this.sendForm.cityId = item.city_id ? item.city_id : "";
      //   this.sendForm.provinceId = item.province_id ? item.province_id : "";
      //   this.sendForm.areaInfo = item.area_info ? item.area_info : "";
      //   this.diQuIds = [
      //     this.sendForm.provinceId,
      //     this.sendForm.cityId,
      //     this.sendForm.areaId,
      //   ];
      //   this.sendForm.address = item.address ? item.address : "";
      //   this.sendForm.sortOrder = item.sort_order != 0 ? item.sort_order : 0;
      //   this.sendForm.remark = item.remark ? item.remark : "";
      //   this.sendForm.warehouseId = item.wh_id ? item.wh_id : "";
      //   console.log(this.sendForm);
      // } else {
      //   this.title = "新增仓库";
      //   this.sendForm = JSON.parse(JSON.stringify(defaultSendForm));
      //   this.sendForm.warehouseId = "";
      // }
    },

    getWhGroupDatas() {
      getWhGroupData().then((res) => {
        this.whGroupLists = res;
      });
    },

    // 获取省市区列表
    getAddressListData() {
      getAreaList().then((res) => {
        this.options = res;
      });
    },

    // 供货方列表
    fromCompanyLists() {
      getFromCompanyList().then((res) => {
        this.fromCompanyList = res;
      });
    },

    //关闭
    handleClose() {
      this.dialogVisible = false;
      this.$refs.formName.resetFields();
    },

    //确认
    handleConfirm() {
       this.$refs.formName.validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            const data = JSON.parse(JSON.stringify(this.sendForm));
            getWarehouseUpdate(data).then((res) => {
                Message.success("提交成功");
                this.$emit("update");
                this.btnLoading = false;
                this.dialogVisible = false;
              }).catch((err) => {
                this.btnLoading = false;
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
  },
};
</script>

<style  lang="scss">
</style>
